<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0020)http://www.baidu.com/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type='text/javascript'
	src='<%=request.getContextPath() %>/dwr/engine.js'> </script>
<script type='text/javascript'
	src='<%=request.getContextPath() %>/dwr/util.js'> </script>
<script type='text/javascript'
	src='<%=request.getContextPath() %>/dwr/interface/spaceForm.js'></script>
<script>

//地图列表对象

var mapList;

//房间对象

var roomObj;

//本人信息对象

var meObj;

//设置本身状态

var myState;

//设置自身控制标记

var ctrlFlag;

//当前按键值

var kbChar;

//老地图

var oldMap="";

//新地图

var newMap="";

//按键开关

var kbSwitch=false;

//声明图片地址数组

var startBtnUrl=new Array();

//用于显示开始或准备的图片地址

setBtnFlag=false;

startBtnUrl[0]="images/readyBtn.gif";
startBtnUrl[1]="images/readyBtn_.gif";

//键盘判断代码(开始)

	ns4 = (window.addEventListener) ? true : false;
	ie4 = (window.attachEvent) ? true : false;

function keyDown(e){


	//火狐浏览器
	
  	//	alert(navigator.appName);
	
  	if(ns4){
  		var nkey=e.which;
  		var iekey='现在是ns浏览器';
  		var realkey=String.fromCharCode(e.which);
  		if(e.which==32){realkey='\' 空格\''}
  		if(e.which==13){realkey='\' 回车\''}
  		if(e.which==27){realkey='\' Esc\''}
  		if(e.which==16){realkey='\' Shift\''}
  		if(e.which==17){realkey='\' Ctrl\''}
  		if(e.which==18){realkey='\' Alt\''}
	}
	
	//IE浏览器
	
  	if(ie4){
  		var iekey=event.keyCode;
  		var nkey='现在是ie浏览器';
  		var realkey=String.fromCharCode(event.keyCode);
  		if(event.keyCode==32){realkey='\' 空格\''}
  		if(event.keyCode==13){realkey='\' 回车\''}
  		if(event.keyCode==27){realkey='\' Esc\''}
  		if(event.keyCode==16){realkey='\' Shift\''}
  		if(event.keyCode==17){realkey='\' Ctrl\''}
  		if(event.keyCode==18){realkey='\' Alt\''}
	}
	
	kbChar=realkey;
	
	document.getElementById("testKB").value=realkey;
	
	//alert('ns浏览器中键值:'+nkey+'\n'+'ie浏览器中键值:'+iekey+'\n'+'实际键为'+realkey);
	
}

	//if(ie4){
		document.onkeydown = keyDown;
	//}	

	if(ns4){
		document.captureEvents(Event.KEYDOWN);
	}
	
//键盘判断代码(结束)

//显示特定秒数的消息框

function showMsgbox(showStr){

	document.getElementById("msgboxSpan").innerHTML=showStr;
	
	showObj("msgboxDiv");
	
	setTimeout("hideObj('msgboxDiv');",1000);

}

//隐藏对象

function hideObj(objName){

	document.getElementById(objName).style.display="none";

}


//显示对象

function showObj(objName){

	document.getElementById(objName).style.display="";

}


//切换地图

function changeMapView(){

	if(kbSwitch==true){

		gls=document.getElementById("game_listSelect");

		for(i=0;i<gls.options.length;i++){
	
			if(gls.options[i].selected==true){
		
				document.getElementById("game_mapveiwImg").src=mapList[i].img;
		
				spaceForm.changeMap(mapList[i].id,function(data) {
			
					if(data=="error:not login"){
				
						showMsgbox("请先登录");
				
					}else if(data=="error:not owner"){
				
						showMsgbox("您不是房主");
								
					}else if(data=="ok"){
				
						showMsgbox("变更成功");
				
					}
			
				});
			
			}
	
		}
	}
}

//获得本人的信息

function watchMe(){

	spaceForm.freshMe(function(data) {
		
		meObj=eval("("+data+")");

	});

}

//从服务器获取地图列表

function roomList(){


	spaceForm.getAllMap(function(data) {
			
		mapList=eval("("+data+")");
				
		optTemp="";
		
		for(i=0;i<mapList.length;i++){
	
			var objOption = document.createElement("OPTION");
			objOption.text=mapList[i].name;
			objOption.value=mapList[i].id;  
  			document.getElementById("game_listSelect").options.add(objOption);
		
		}
		
		document.getElementById("game_listSelect").options[0].selected=true;
		document.getElementById("game_mapveiwImg").src=mapList[0].img;
	});

}

//刷新玩家列表

function freshPersonList(){

	//将房间准备的状态清空

    for(j=0;j<4;j++){
    
    	document.getElementById("person_img"+j+"_id").style.display="none";
    
    }
	
	//获得人员列表
	
	pl=roomObj.personList;
	
	//如果本人为房主，就将图片地址 设置为开始 否则 设置为准备
	
	//alert(roomObj.owner+"  "+meObj.id);
	
	if(roomObj.owner==meObj.id){
	
		if(roomObj.state=="gameing"){
		
			document.getElementById("game_listSelect").disabled=true;
		
		}else{
		
			document.getElementById("game_listSelect").disabled=false;
		
		}
		
		startBtnUrl[0]="images/startBtn.gif";
		
		startBtnUrl[1]="images/startBtn_.gif";
		
		myState="owner";
		
	}else{
			
		document.getElementById("game_listSelect").disabled=true;
		
		document.getElementById("game_mapveiwImg").src=roomObj.map.img;
	
	}
	
	if(setBtnFlag==false){
	
		document.getElementById("btnStart").src=startBtnUrl[0];
		
		setBtnFlag=true;
		
	}
	
	
	
	i=0;
		
	for(prop in pl){
	
		
		if(pl[prop].id!=meObj.id){
	
			//将玩家id存储至隐藏域并显示玩家帐号信息
	
			document.getElementById("person_div"+i+"_id").value=pl[prop].id;
		
			document.getElementById("person_span"+i+"_id").innerHTML=pl[prop].member;
			
			document.getElementById("person_showimg"+i).style.backgroundImage="url(images/demo.gif)";

			//显示准备状态
						
			if(pl[prop].state=="wait"){

				document.getElementById("person_img"+i+"_id").src="images/unready.png";
				
				document.getElementById("person_img"+i+"_id").style.display="";
			
			}else if(pl[prop].state=="ready"){

				document.getElementById("person_img"+i+"_id").src="images/ready.png";
				
				document.getElementById("person_img"+i+"_id").style.display="";
			
			}
			
			i++;
		
		}else{
		
		    ctrlFlag=pl[prop].state;
	
			if(pl[prop].state=="wait"){
			
				startBtnUrl[0]="images/readyBtn.gif";
		
				startBtnUrl[1]="images/readyBtn_.gif";
				
				myState="ready";

			}else if((pl[prop].state=="ready") && (roomObj.owner!=meObj.id)){
			
				startBtnUrl[0]="images/cancelBtn.gif";
		
				startBtnUrl[1]="images/cancelBtn_.gif";
				
				myState="wait";

			}
			
		
		}
	
	}

}

//设置自身状态

function changeMeState(){

	spaceForm.setMyState(myState,function(data){
	
		//房主模式
	
		if(myState=="owner"){
		
			if(data=="ok"){
			
				kbSwitch=true;
			
				showMsgbox("开始游戏");
			
			}else if(data=="error:not all"){
			
				showMsgbox("没有全体准备");
			
			}else{
			
				//alert("未知异常");
			
			}
		
		//等待模式
		
		}else if(myState=="wait"){
		
			if(data=="ok"){
			
				showMsgbox("取消准备");
			
			}
		
		//准备模式
		
		}else if(myState=="ready"){
		
			if(data=="ok"){
			
				showMsgbox("已经准备");
			
			}
		
		}
		
		setBtnFlag=false;
	
	});

}


//刷新游戏画面

function freshMap(){

	try{

		mapw=roomObj.map.width;
	
		maph=roomObj.map.height;
	
		newMap=roomObj.map.mapBody;
		
		//第一次页面进行整体画图
		
		if(oldMap==""){
		
			maptt="";
	
			for(p=0;p<maph;p++){
		
				for(q=0;q<mapw;q++){
			
					maptt=maptt+"<img id='mapS_"+(p*maph+q)+"' height='20px' width='20px' src='images/block/"+transChar(newMap.substring((p*maph+q),(p*maph+q)+1))+"'/>";
			
				}
			
				if(p!=mapw-1){			
			
					maptt=maptt+"<br/>";
			
				}
		
			}
		
			document.getElementById("game").innerHTML=maptt;
		
		//含有图像基础后，使用算法进行快速刷新
		
		}else{
		
			for(p=0;p<maph;p++){
		
				for(q=0;q<mapw;q++){
					
					//发现变化的地图，则转换相应的图片
					
					newMapChar=newMap.substring((p*maph+q),(p*maph+q)+1);
					
					oldMapChar=oldMap.substring((p*maph+q),(p*maph+q)+1);
					
					if(newMapChar!=oldMapChar){
					
						document.getElementById("mapS_"+p*maph+q).src="images/block/"+transChar(newMapChar);
					
					}
				
				}
				
			}	
			
			//将新地图赋值给老地图
			
			oldMap=newMap;
		
		}
		
	}catch(e){
	
	
	}

}

//字符翻译

function transChar(ct){

	if(ct=="#"){
	
		return "wall.gif";
		
	}else if(ct=="_"){
	
		return "empty.gif";
		
	}else if(ct=="+"){
	
		return "died.gif";

	}else if(ct>0 && ct<10){
	
		return getPlayerImg(ct);
	
	}else{
	
		return "empty.gif";
		
	}

}

//获得正确的玩家动作

function getPlayerImg(ct){

	//获得人员列表
		
	pl=roomObj.personList;

	for(prop in pl){
	
		if(pl[prop].state==ct){
		
			if(pl[prop].direction==""){
			
				return "player_"+ct+"_1.gif";
			
			}else{
		
				return "player_"+ct+"_"+pl[prop].direction+".gif";
			
			}
		}

	}

}


//获得远程房间详细信息

function fresh(){

	try{

		spaceForm.freshRoom(function(data){
	
			roomObj=eval("("+data+")");
		
			freshPersonList();
		
			if(roomObj.state=="gameing"){
		
				freshMap();
			
				//游戏中锁住开始与加入键
			
				hideObj("btnStart");
			
				//关闭选择地图
							
				//document.getElementById("game_listSelect").disabled=true;
			
		
			}else{
		
				document.getElementById("game").innerHTML="";
		
				//游戏放开开始与加入键
			
				showObj("btnStart");
			
			}
	
		});
	
	}catch(e){
	
	
	}
}

//向服务器发送按键指令

function postKB_event(){

	try{

	if(kbSwitch==true || document.getElementById("game").innerHTML!=""){

		spaceForm.acceptCtrlList(kbChar,function(data){
	
	
		});
	
	}
	
	}catch(e){
	
	
	}

}


</script>
<style type="text/css">
BODY {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	FONT-SIZE: 12px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	COLOR: #65666a;
	LINE-HEIGHT: 20px;
	PADDING-TOP: 0px;
	background-color:#FFFFFF;
}

#all {
	MARGIN-LEFT: auto;
	OVERFLOW: hidden;
	WIDTH: 776px;
	MARGIN-RIGHT: auto;
	HEIGHT: auto;
}

#left {
	MARGIN-LEFT: auto;
	float: left;
	width: 776px;
	height: auto;
	margin-right: auto;
	background-image:url(images/bg.png);
}

#right {
	MARGIN-LEFT: auto;
	float: left;
	width: 248px;
	height: auto;
	margin-right: auto;
}

#title {
	MARGIN-LEFT: auto;
	OVERFLOW: hidden;
	width: 776px;
	MARGIN-RIGHT: auto;
	height: 20px;
	background-image: url(images/game_title.png);
}

#memu {
	MARGIN-LEFT: auto;
	OVERFLOW: hidden;
	width: 776px;
	MARGIN-RIGHT: auto;
	height: 120px;
}
#game_main {
	MARGIN-LEFT: auto;
	OVERFLOW: hidden;
	width: 776px;
	MARGIN-RIGHT: auto;
	height: 380px;;
}

.room {
	width: 300px;
	height: 130px;
	float: left;
	margin-left: 50px;
	background-image: url(images/blue_room.png);
}

#create_div {
	position:absolute;
	display:none;
	width:303px;
	height:208px;
	z-index:2;
	left: 342px;
	top: 141px;
	background-image:url(images/create_bg.png);
}
.person_div{
float:left;
height:120px;
width:105px;
background-image:url(images/person_bg.png);

}
#game_map{
float:left;
height:120px;
width:251px;
background-image:url(images/game_map.png);

}
#game{
float:left;
height:380px;
width:630px;
background-image:url(images/game.png);

}
#tool{
float:left;
height:380px;
width:146px;
background-image:url(images/tools.png);

}

</style>
</head>

<body>

<div id="all">
<div id="left">
<div id="title"></div>
<div id="memu">
	<div id="person_div0" class="person_div" >
		<div id="person_showimg0" style="height:120px; width:100px; ">
			<input id="person_div0_id" type="hidden"/>
			<span id="person_span0_id" style=" color:#FF0000"></span>
			<br/>
			<img id="person_img0_id" src="" width="20px" height="20px" style="display:none "/>
		</div>
	</div>
	<div id="person_div1" class="person_div">
		<div id="person_showimg1" style="height:120px; width:100px; ">
			<input id="person_div1_id" type="hidden"/>
			<span id="person_span1_id" style=" color:#FF0000"></span>
			<br/>
			<img id="person_img1_id" src="" width="20px" height="20px" style="display:none "/>
		</div>
	</div>
	<div id="person_div2" class="person_div">
		<div id="person_showimg2" style="height:120px; width:100px; ">
			<input id="person_div2_id" type="hidden"/>
			<span id="person_span2_id" style=" color:#FF0000"></span>
			<br/>
			<img id="person_img2_id" src="" width="20px" height="20px" style="display:none "/>
		</div>
	</div>
	<div id="person_div3" class="person_div">
		<div id="person_showimg3" style="height:120px; width:100px; ">
			<input id="person_div3_id" type="hidden"/>
			<span id="person_span3_id" style=" color:#FF0000"></span>
			<br/>
			<img id="person_img3_id" src="" width="20px" height="20px" style="display:none "/>
		</div>
	</div>
	<div id="person_div4" class="person_div">
		<div id="person_showimg4" style="height:120px; width:100px; ">
			<input id="person_div4_id" type="hidden"/>
			<span id="person_span4_id" style=" color:#FF0000"></span>
			<br/>
			<img id="person_img4_id" src="" width="20px" height="20px" style="display:none "/>
		</div>
	</div>
	<div id="game_map">
	<!--
		<div style="height:5px ">
		&nbsp;
		</div>
	-->
		<div id="game_list" style="height:25px; margin-top:5px">
		<center>
          <select id="game_listSelect" style="width:200px " onChange="changeMapView();">
          </select>
		</center>
		</div>
		<div id="game_mapveiw" style="height:80px ">
		  	<center>
				<img id="game_mapveiwImg" src=""/>
			</center>
		</div>
	</div><!--game_map-->
</div>
<!--memu-->
<div id="game_main">
 	<div id=game>
		
	</div>
	<div id=tool>
	
		<div style="height:80px; "><div></div></div>
		<div style="height:60px; "><div></div></div>
		<div style="height:165px; "><div></div></div>
		<div style="height:35px;"><div></div></div>
		<div style="height:35px;"><img id="btnStart" width="140px" height="35px" src="images/startBtn.gif" onMouseOver="this.src=startBtnUrl[1];" onMouseOut="this.src=startBtnUrl[0];" onClick="changeMeState();"/> </div>
	
	</div>
</div>
<!--rooms-->

<!-- 消息框 -->
<div id="msgboxDiv" style="position:absolute; width:300px; height:200px; z-index:0; left: 308px; top: 209px; background-image:url(images/msg.gif); display:none">
	<div style="margin-top:50px ">
	<center>
		<span id="msgboxSpan"></span>
	</center>
	</div>
</div>
<!-- -->

</div>
<!--left-->
<!--right-->
</div>


<input type="button" onClick="freshMap();" value="fresh"/>
<input type="button" onClick="showMsgbox('测试消息');" value="测试消息"/>
<input type="button" onClick="postKB_event();" value="发送指令"/>
按键代码<input id="testKB" type="text" />
地图状态<input id="testMap" type="text" />

<script>

	watchMe();

	roomList();
	
	setInterval("fresh();",1000);

	setInterval("postKB_event();",2500);

</script>
</body>
</html>
